<template>
    <div class="app">
        <a-spin :loading="loading" :tip="text" class="rain-spin">
            <router-view />
        </a-spin>
    </div>
    <a-drawer :width="340" v-model:visible="drawer" unmount-on-close placement="bottom" height="65vh" :footer="false"
        :header="false" title="任务管理器">
        <task />
    </a-drawer>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useTaskStore } from "./module/task/store/TaskStore";

import task from '@/module/task/page/index.vue'
import { mapState } from "pinia";
import { useLoadingStore } from "./store/LoadingStore";

export default defineComponent({
    name: '',
    components: { task },
    data: () => ({
        drawer: false
    }),
    computed: {
        ...mapState(useTaskStore, ['visible']),
        ...mapState(useLoadingStore, ['loading', 'text'])
    },
    watch: {
        drawer(newValue: boolean) {
            if (newValue === this.visible) {
                return;
            }
            if (newValue) {
                useTaskStore().openTaskPanel();
            } else {
                useTaskStore().closeTaskPanel();
            }
        },
        visible(newValue: boolean) {
            this.drawer = newValue;
        }
    },
    created() {
        useTaskStore().init();
        // 主题
        if (utools.isDarkColors()) {
            // 设置为暗黑主题
            document.body.setAttribute('arco-theme', 'dark')
        } else {
            // 恢复亮色主题
            document.body.removeAttribute('arco-theme');
        }
    },
});
</script>
<style scoped></style>